<template>
  <!-- 主页 -->
  <div class="main" ref="home">



    <div class="aside">
      <router-link to="tof_gimbalguide" class="title" title="回到首页">
        <img src="static/logo.png" alt="" />
        <!-- <div class="v">{{ title_s }}</div> -->
      </router-link>
      <div class="list">
        <el-tree :data="secondLevelData" :props="defaultProps" v-show="secondLevelData" ref="secondTree"
          highlight-current accordion auto-expand-parent @node-click="handleNodeClicksecond"></el-tree>



      </div>
      
      <div class="exit" @click="handleCommand">
        
        <img style="width: 20px; height: 20px;" src="static/退出.png" alt="" />退出
      </div>

    </div>
    <!-- <div class="leftside">
      <div class="title">
        设备控制
      </div>
      <div class="list">
        <el-tree class='nav_class' :data="nav" :props="defaultProp" ref="topTree" highlight-current accordion
          auto-expand-parent @node-click="handleNodeClick" :expand-on-click-node="false"></el-tree>

      </div>

    </div> -->

    <!-- 路由匹配页面 -->
    <router-view class="content"></router-view>
  </div>
</template>

<script>

import $ from "jquery";
import { DxocontrolApis } from "@/utils/apis";
import { ajax } from "@/utils/ajax";
import { indexApis } from "@/utils/apis";
import { time } from "echarts";
export default {
  mounted() {
    // this.$refs.home.style.height = this.$refs.home.clientHeight + 'px';
    // this.$refs.home.style.width = this.$refs.home.clientwidth + 'px';
    // window.addEventListener('resize', this.checkKeyboardHeight);
    let that = this;
    let _beforeUnload_time = 0, _unload_time = 0
    // 窗口关闭或刷新时候的操作
    window.addEventListener('beforeunload', (event) => {
      _beforeUnload_time = new Date().getTime()

    });
    window.addEventListener('beforeunload', (e) => this.beforeunloadHandler(e));
    window.addEventListener('unload', (event) => {
      _unload_time = new Date().getTime()

z
    });


    this.isSelect = this.$route.meta.title;
    console.log(this.$route.meta)
    // 添加列表切换特效
    /*  $(".list-item ").each(function () {

       $(this).click(function () {
         $(".list-item").removeClass("active");
         $(this).addClass("active");


       });
     }); */
  },
  beforeunloadHandler(e) {
    e = e || window.Event;
    if (e) {
      e.returnValue = '关闭提示';
    }
    return '关闭提示';
  },
  created() {
    this.getauth()

  },
  methods: {
    handleNodeClick(data) {

      this.secondLevelData = data.children_title;
      console.log(data.children, '-------------------')
    },
    // checkKeyboardHeight() {
    //   // 根据实际情况调整判断条件
    //   const screenHeight = window.innerHeight;
    //   const bodyHeight = document.body.clientHeight;
    //   this.keyboardHeight = screenHeight - bodyHeight;

    //   // 如果键盘高度大于某个阈值，说明键盘可能已经弹出
    //   if (this.keyboardHeight > 100) { // 100是阈值，具体值需根据实际情况调整
    //     // 在这里调整布局，比如增加padding-bottom
    //   }
    // },
    beforeDestroy() {
      // 移除监听
      window.removeEventListener('resize', this.checkKeyboardHeight);
    },
    getauth() {
      this.$axios.get(this.$settings.BASE_URL_user_all + 'user/menu/')
        .then((res) => {
          // print(res.data.data,'-----------')
          this.nav = res.data.data.children
          this.secondLevelData = this.nav[0].children_title;
        })
        .catch((err) => {

        });


    },
    handleNodeClicksecond(data) {

      this.$router.push(data.url)
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    change() {
      console.log(this);
      // console.log(this.$children[1].$el);
      // console.log($(this.$el));
    },

    handleCommand() {
      window.localStorage.removeItem("token")
      this.$router.push("login");
    },
  },

  data() {
    return {
      keyboardHeight: 0,
      nav: [],
      renderedNodes: [], // 存储渲染后的节点数据
      topLevelData: [],
      secondLevelData: '',
      defaultProps: {
        children: 'children_title',
        label: 'label',

      },
      defaultProp: {
        children: 'children',
        label: 'label',

      },
      title_s: '版本号：V 2.1',
      token: localStorage.getItem('token') || '',
      title: '实验室信息管理系统',
      isSelect: "首页",


    };
  },
};
</script>

<style lang="less">
// 导入通用样式

@media screen and (min-width: 1000px) and (max-width: 2000px) {

  html,
  body {
    font-size: 10px;
  }

  .main .aside .list .el-tree-node .el-tree-node__label {
    font-size: @h*18vh !important;
  }

  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background: none !important;
  }

  .el-tabs__item {
    color: #fff;
  }

  .el-tabs__header {
    margin-bottom: 0;
  }

  .main {
    font-size: @h*13vh;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    // height: 100%;
    background: #1F2935;
    height: 100%;

    .hide {
      display: none;
    }

    .top {
      display: flex;
      overflow: hidden;
      width: 100%;
      height: @h*80vh;
      // height: 80px;
      background: #2e2e2e;
      line-height: @h*80vh;
      // line-height: 80px;
      font-size: 1.375rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #fff;

      .left {
        // padding: 1% 2%;
        // width: (280/1920)*100vw;
        width: @w * 280vw;
        // width: 280px;
        float: left;
        text-align: center;
        font-size: 1.75rem;
        font-family: Arial;
        font-weight: bold;
        color: #ffffff;
      }

      .right {
        // padding: 1% 2%;
        width: @w*1640vw;
        flex: 1;
        float: left;
        overflow: hidden;
        height: @h*80vh;

        // height: 80px;
        .title {
          float: left;
          font-size: 1.75rem;
          font-family: Arial;
          font-weight: bold;
          color: #ffffff;
          margin-left: @w*32vw;
          letter-spacing: 5px;
        }

        .user {
          float: right;
          margin-right: @w*80vw;
          height: @h*80vh;

          img {
            width: @w*40vw;
          }

          .el-dropdown {
            vertical-align: @h*14vh;
            margin-left: @w*28vw;
            color: #fff;
          }
        }
      }
    }

    .aside {
      .is-current {
        .el-tree-node__label {
          font-size: 17px;
          color: #00A0E9;
        }
      }

      img {
        float: left;
        margin: @h*25vh @w*49vw;
        height: @h*29vh;
        width: @w*143vw;
      }

      .exit {

        color: #fff;
        font-size: @h*20vh;
        height: @h*80vh;
        width: @w*250vh;
        float: right;
        text-align: center;
        line-height: @h*80vh;

        div {
          float: left;
          // display: inline-block;
        }

        img {
    // display: inline-block;
    margin: @h*25vh @w*0vw;
    float: left;
}
        


      }

      float: left;
      width: @w * 1920vw;
      // width: 280px;
      background: #1F2935;
      // height: 100%;
      height: @h*80vh;
      // min-height: calc(100vh - 80px);
      position: relative;
      // padding: 10px;
      // margin: 10px 20px 0;

      .title {
        height: @h*80vh;
        line-height: @h*80vh;
        float: left;
        font-size: 30px;

        // padding: 0 40px;
        // img {
        //   width: @w*240vw;
        //   height: @h* 80vh;
        // }

        .v {
          position: fixed;
          left: @w*90vw;
          top: @h*20vh;
          font-size: @h*6vw;
        }
      }

      .list {
        float: left;
        // min-width: @w * 200vw;
        width: @w * 1450vw;


        // margin: 0 @w * 10vw;
        .el-tree-node {
          float: left;
          height: @h* 80vh;
          margin: 0 @w * 10vw;

          .el-tree-node__label {
            font-size: 17px
          }

          .is-current {
            .el-tree-node__label {
              color: #00A0E9;
              font-size: 17px;

            }
          }

          // background-color:transparent;
        }

        // .el-tree-node:focus{
        //   // background-color:transparent;
        // }
        .el-tree-node__content {
          float: left;
          height: @h* 40vh;
          line-height: @h* 80vh;
          font-size: 17px;
          text-align: center;
          color: #fff;
          padding: @h* 20vh 0;
          margin: 0 @w * 15vw;
          // background: #000;
        }

        .el-tree-node.is-expanded>.el-tree-node__children {
          background-color: #4d4d4d;

          .el-tree-node__content {
            float: left;
            height: @h* 40vh;
            line-height: @h* 80vh;
            font-size: @h* 20vh;
            text-align: center;
            color: #fff;
            padding: @h* 20vh 0;
            // margin: 0 @w * 15vw;;
            background-color: #4d4d4d;

            :hover {
              color: #00A0E9
            }
          }

        }

        .el-tree-node__content:hover {
          color: #00A0E9
        }

        .el-tree-node:hover {
          color: #00A0E9
        }

        .el-tabs--card>.el-tabs__header {
          border: 2px solid #000f2e;
          border-top: 0;
        }

        .el-tree-node__expand-icon {
          display: none;
        }

        .el-tabs--card>.el-tabs__header .el-tabs__nav {
          border: 0;
        }

        .el-tabs--card>.el-tabs__header .el-tabs__item {
          border: 2px solid #000f2e;
        }

        .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
          border-bottom: 0;
        }

      }

    }

    .leftside {
      width: @w*240vw;
      height: 100%;
      background: #1F2935;
      border-radius: 0px 0px 0px 0px;
      float: left;

      .is-current {
        color: #0081FF;
      }

      .title {
        height: @h* 52vh;
        width: @w*200vw;
        line-height: @h* 52vh;
        text-align: center;
        letter-spacing: @w*1.5vw;
        font-weight: 700;
        font-size: @h* 20vh;
      }

      .el-tree-node:focus {
        background: #161D26;
        color: #0081FF;
      }

      .el-tree-node:hover {
        background: #2C3641;
        color: #0081FF;
      }

      .el-tree {
        background-color: #2C3641;
        color: #fff;
        font-family: Source Han Sans, Source Han Sans;

        .el-tree-node__content {
          height: @h* 44vh;
          line-height: @h* 44vh;
          text-align: left;
          margin: 0 !important;
          padding: 0 !important;


        }

        .el-tree-node__content>.el-tree-node__expand-icon {
          padding: 0;
          // float: left;

        }

        .el-tree-node__label {
          font-size: @h* 16vh;
        }
      }

    }

    .content {
      // width: 1660px;
      width: @w*1920vw;
      // min-height: calc(100vh - 80px);
      height: 100%;
      float: left;
      background: #161D26;
    }
  }
}



@media screen and (min-width: 300px) and (max-width: 500px) {

  html,
  body {
    font-size: 5px;
  }

}
</style>
